<!--
 * @Description: 文件说明
 * @Author: wangbin
 * @Date: 2020-12-21 21:58:31
 * @LastEditTime: 2020-12-24 17:15:35
 * @LastEditors: wangbin
 * @FilePath: \org-framework\src\App.vue
-->
<template>
  <div id="app">
    <el-select v-model="selectArr" multiple placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  <div v-for='(item,index) in selectArr' :key='index' class='app-div'>
    <span>
      {{getText(item)}}
    </span>
    <el-input style="width:120px;margin-left:10px;" v-model="selectArr[index]" class='app-div-input'/>
  </div>
  </div>
</template>

<script>


export default {
  name: 'App',
  components: {

  },
  data(){
    return {
     selectArr:[],
     inputValue:'',
      options: [{
          value: '1',
          label: '黄金糕'
        }, {
          value: '2',
          label: '双皮奶'
        }, {
          value: '3',
          label: '蚵仔煎'
        }, {
          value: '4',
          label: '龙须面'
        }, {
          value: '5',
          label: '北京烤鸭'
        }],
    }
  },
  methods:{
    getText(val){
       let obj = this.options.find(item=>{
         return item.value===val
       })
       if(obj){
         return obj.label
       }else{
         return 'demo'
       }
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.app-div{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.app-div-input{
  width:180px;
}
</style>
